@if swmmobile.css pretty {
	@external iOS, desktop, android, dropDownList, focus;
}

.desktop .dropDownList,
.android .dropDownList {
	display: -webkit-box;	
}

.iOS .dropDownList > select {
	font-size: .8em;
}

.desktop .dropDownList > select,
.android .dropDownList > select {
	\-webkit-appearance: none;
	height: 1.5em;
	min-width: 10em;
	padding-left: .4em;
	border: 0;
	border-radius: .3em;
	\-webkit-box-shadow: 0 0 1px white;
	\-webkit-background-clip: content;	
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(gray))');
}

.desktop .dropDownList > select {	/* bug in Desktop Chrome? */
	height: 24px;
}

.desktop .dropDownList > div:nth-child\(2\),
.android .dropDownList > div:nth-child\(2\) {
	position: relative;
	border: 0;
	width: 1.5em;
	height: 1.5em;
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
	margin-left: -1.5em;
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBB), to(#666))');
}

.desktop .dropDownList > div:nth-child\(3\),
.android .dropDownList > div:nth-child\(3\) {
	position: relative;
	border: .4em solid black;
	border-right-color: transparent;
	border-left-color: transparent;
	border-bottom-color: transparent;
	height: 0.001em;
	width: 0.001em;
	left: -1.2em;
	top: .6em;
}

.desktop .dropDownList > div:nth-child\(4\),
.android .dropDownList > div:nth-child\(4\) {
	position: relative;
	border: .4em solid white;
	border-right-color: transparent;
	border-left-color: transparent;
	border-bottom-color: transparent;
	height: 0.001em;
	width: 0.001em;
	left: -1.95em;
	top: .55em;
}

.desktop .dropDownList.focus > select,
.android .dropDownList.focus > select {
	\-webkit-box-shadow: lightgreen 0em 0em .4em;
}

.desktop .dropDownList.focus > div:nth-child\(2\),
.android .dropDownList.focus > div:nth-child\(2\) {
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(lightgreen), to(darkgreen))');
}